
<template>
  <div
    class="operation-cell align-center"
  >
    <el-tooltip
      :enterable=" false"
      :open-delay="1000"
      effect="dark"
      :content="params.data&&params.data.operationType === 'confirm' ? '保存':'修改'"
      placement="top-start"
    >
      <el-button
        v-show="params.data"
        type="text"
        class="icon-button"
        :disabled="params.data&&params.data.canModify === 0"
        @click.stop="handleUpdate"
      >
        <i
          :class="saveIcon"
          @mousedown.stop
          @mouseup.stop
        />
      </el-button>
    </el-tooltip>
    <el-tooltip
      v-if="remove && params.data && !params.data.revoke"
      :enterable="false"
      :open-delay="1000"
      effect="dark"
      content="删除"
      placement="top-start"
    >
      <el-button
        v-show="params.data"
        class="icon-button"
        type="text"
        :disabled="params.data&&params.data.canDelete === 0"
        @click.stop="handleDelete"
      >
        <i
          :class="params.data&&params.data.canDelete === 0 ?'el-icon-delete-solid': 'el-icon-delete'"
          @mousedown.stop
          @mouseup.stop
        />
      </el-button>
    </el-tooltip>
    <el-tooltip
      v-if="revoke && params.data && params.data.revoke"
      :enterable="false"
      :open-delay="1000"
      effect="dark"
      content="撤销"
      placement="top-start"
    >
      <el-button
        v-show="params.data"
        class="icon-button"
        type="text"
        @click.stop="handleRevoke"
      >
        <i
          class="el-icon-circle-close"
          @mousedown.stop
          @mouseup.stop
        />
      </el-button>
    </el-tooltip>
  </div>
  <!-- <span v-else>&nbsp;</span> -->
</template>

<script>

export default {
  name: 'OperationCellRenderer',
  data() {
    return {
      saveButtonStatus: ''
    }
  },
  computed: {
    update() {
      return this.params.context.componentParent.update
    },
    saveIcon() {
      if (this.saveButtonStatus === 'error') {
        return 'icon element-icons icon-baocun warnColor'
      }
      if (this.params.data && this.params.data.operationType === 'confirm') {
        return this.params.data.saveButtonStatus === 'loading' ? 'el-icon-loading' : 'icon element-icons icon-baocun warnColor'
      } else {
        return 'el-icon-edit operation'
      }
    },
    remove() {
      return this.params.context.componentParent.delete
    },
    revoke() {
      return this.params.context.componentParent.revoke
    }
  },
  mounted() {
    window.addEventListener('setItemEvent', this.handleStorageChange)
  },
  beforeDestroy() {
    window.removeEventListener('setItemEvent', this.handleStorageChange)
  },
  methods: {
    handleStorageChange(e) {
      const _this = this
      if (e.key === 'responseCode' && _this.params.data && this.params.data.operationType === 'confirm' && _this.saveButtonStatus !== 'error') {
        if (e.newValue !== 0) {
          _this.params.data.saveButtonStatus = 'error'
          _this.saveButtonStatus = 'error'
        } else {
          delete _this.params.data.saveButtonStatus
        }
      }
    },
    // 修改
    handleUpdate() {
      const editingCells = this.params.api.getEditingCells()
      const validate = editingCells && editingCells.length > 0
      if (validate) return this.$message.warning('单元格处于编辑状态，请点击表格所选行！')
      this.update && this.update(this.params.data, this.params)
      // 是否使用延时交互
      // if (this.params.data && this.params.data.editingNotSave) {
      // // 编辑状态校验
      //   const editingCells = this.params.api.getEditingCells()
      //   const validate = editingCells && editingCells.length > 0
      //   if (validate) return this.$message.warning('单元格处于编辑状态，请点击表格所选行！')
      //   this.update && this.update(this.params.data, this.params)
      // } else {
      //   // loading
      //   this.params.data.saveButtonStatus = 'loading'
      //   // 保存之前重绘表格
      //   this.params && this.params.api.redrawRows()
      //   // 延时保存，等待表格的数据联动(调用接口的联动方式不适用)
      //   var timer = setTimeout(() => {
      //     this.update && this.update(this.params.data, this.params)
      //     delete this.params.data.saveButtonStatus
      //     clearTimeout(timer)
      //   }, 500)
      // }
    },
    // 删除
    handleDelete() {
      this.remove && this.remove(this.params.data, this.params)
    },
    // 撤销
    handleRevoke() {
      this.revoke && this.revoke(this.params.data, this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-button--mini {
    padding: 0px;
    font-size: 17px !important;
  }

.warnColor {
  color: darkblue;
}
</style>

